import React, { PureComponent } from 'react';
import { Upload, Input, Form, Button } from 'antd';
const { Item: FormItem } = Form;
const formItemLayout = {
  labelCol: {
    xs: { span: 6 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 16 },
    sm: { span: 16 },
  },
  labelAlign: 'right',
};
class JUploader extends PureComponent {
  static getDerivedStateFromProps(nextProps) {
    // Should be a controlled component.
    if ('value' in nextProps) {
      return nextProps.value;
    }
    return null;
  }

  constructor(props) {
    super(props);
    const { value = '' } = props;
    this.state = {
      url: value,
    };
  }

  componentDidMount() {}

  handleChange = (dates, dateStrings) => {
    const { onChange } = this.props;
  };

  customRequest = info => {
    const { customRequest } = this.props;
    const { fileList } = this.state;
    customRequest(url => {
      fileList.push(url);

      this.setState({ url: url });
    });
  };

  pathChange = e => {
    const { onChange } = this.props;
    if (onChange) onChange();
  };

  render() {
    const { url } = this.state;
    const { customRequest, handleChange } = this;
    return (
      <div>
        <FormItem label="图片LOGO地址" {...formItemLayout}>
          <Input placeholder="图片LOGO地址" value={url} readOnly></Input>
        </FormItem>
        <FormItem label="图片上传" {...formItemLayout}>
          <Upload {...this.props} customRequest={customRequest} onChange={handleChange}>
            <Button icon="upload">上传</Button>
          </Upload>
        </FormItem>
      </div>
    );
  }
}
export default JUploader;
